.goodsTemlate {
    background-color: #F2F2F2;
    position: relative;
    min-height: 100vh;
    box-sizing: border-box;
    padding-bottom: 40rpx;
}

/* Tab容器 */
.tabContainer {
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
}

/* Tab栏 */
.tabBar {
    background-color: #fff;
    border-bottom: 2rpx solid #f0f0f0;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Tab滚动容器 */
.tabScrollView {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;

    &::-webkit-scrollbar {
        display: none;
    }
}

/* Tab项 - Small Button样式 */
.tabItem {
    padding: 12rpx 24rpx;
    margin: 12rpx 12rpx;
    border-radius: 16rpx;
    background-color: #f5f5f5;
    border: 2rpx solid #f0f0f0;
    position: relative;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

/* 激活的Tab项 */
.activeTab {
    background-color: #fd7901;
    border-color: #fd7901;
}

/* Tab文本 */
.tabText {
    font-size: 28rpx;
    color: #666;
    font-weight: 500;
}

/* 激活的Tab文本 */
.activeTabText {
    color: #fff;
    font-weight: 600;
}

/* Tab指示器 - 移除指示器，使用背景色区分 */
.tabIndicator {
    display: none;
}

/* Tab内容区域 */
.tabContent {
    background-color: #fff;
    padding: 20rpx;
}

/* 空白页定制按钮 */
.blankCustomizeContainer {
    padding: 30rpx 30rpx 60rpx 30rpx;
}

.blankCustomizeButton {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    border-radius: 10rpx;
    padding: 50rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.plusIcon {
    font-size: 36rpx;
    color: #fd7901;
    margin-right: 10rpx;
    font-weight: bold;
}

.blankCustomizeText {
    font-size: 32rpx;
    color: #fd7901;
    font-weight: bold;
}

/* 模板标题 */
.templateTitleContainer {
    display: flex;
    justify-content: center;
    margin-bottom: 60rpx;
}

.templateTitle {
    font-size: 28rpx;
    color: #000000;
    letter-spacing: 2rpx;
    font-weight: bold;
}

/* 模板分类容器 */
.templateCategoriesContainer {
    padding: 0 30rpx;
}

/* 模板分类 */
.templateCategory {
    margin: 20rpx 0px;
    background-color: #FFFFFF;
    border-radius: 10rpx;
    padding: 30rpx;
}

.categoryHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
}

.categoryName {
    font-size: 28rpx;
    color: #333333;
    font-weight: bold;
}

.arrowIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26rpx;
    height: 26rpx;
    color: #000000;
    padding: 15rpx;
    margin: -15rpx 0rpx;
}

/* 模板列表 - 网格布局 */
.templateList {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    height: calc(29vw * 2.5 + 20rpx * 1.5);
    /* 2.5行高度 + 间距 */
    overflow-y: auto;
    padding: 10rpx 0;
    scroll-behavior: smooth;
    /* 隐藏滚动条，但保持可滚动 */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */

    &::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari and Opera */
    }
}

.templateItem {
    width: 29vw;
    /* 屏幕宽度的29% */
    position: relative;
    box-sizing: border-box;
}

.templateImage {
    width: 29vw;
    /* 屏幕宽度的29% */
    height: 29vw;
    /* 屏幕宽度的29% */
    background-color: #FAFAFA;
    border-radius: 12rpx;
    // box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

/* 加载状态 */
.loadingContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60rpx 0;
    /* 确保单独显示一行不受flex布局影响 */
    width: 100%;
    flex-shrink: 0;
    flex-basis: 100%;
    clear: both;
    margin-left: 0;
    margin-right: 0;
}

.loadingText {
    font-size: 28rpx;
    color: #666666;
}

/* 错误状态 */
.errorContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60rpx 30rpx;
    text-align: center;
}

.errorText {
    font-size: 28rpx;
    color: #FF4D4F;
}

/* 空状态 */
.emptyContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100rpx 30rpx;
    text-align: center;
    /* 确保单独显示一行不受flex布局影响 */
    width: 100%;
    flex-shrink: 0;
    flex-basis: 100%;
    clear: both;
    margin-left: 0;
    margin-right: 0;
}

.emptyText {
    font-size: 28rpx;
    color: #999999;
}